<template>
  <div>
    <div class="user-head">
      <div class="page-continue">
        <img class="headimg" :src="headimg">
      </div>
    </div>
    <div class="list page-continue">
      <div class="note" v-for="(item,index) in noteList" :key="index" @click="go(index)">
        <div class="tittle" :style="{color:item.tittleColor,fontWeight:item.isgood?'600':'500'}">
          {{item.notename}}
          <el-tag v-if="item.isgood" type="success" class="tags">精华帖</el-tag>
          <el-tag v-if="item.top" type="warning" class="tags">置顶帖</el-tag>
        </div>
        <div class="author">{{nickname}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import userApi from "@/assets/api/user.js";
export default {
  name: "home",
  data() {
    return {
      nickname: null,
      headimg: null,
      userid: null,
      noteList: []
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    $route() {
      this.init();
    }
  },
  methods: {
    init() {
      this.userid = this.$route.params.id;
      userApi.info(this.userid).then(res => {
        if (res.data.success == 0) {
          this.$message.error("没有此用户");
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        } else {
          this.nickname = res.data.user.nickname;
          this.headimg = res.data.user.headimage;
          userApi.notes(this.userid).then(res => {
            this.noteList = res.data.resultData;
          });
        }
      });
    },
    go(index) {
      this.$router.push("/article/" + this.noteList[index].noteid);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/source.scss";
@import "@/assets/screen.scss";
.user-head {
  padding-top: 13vh;
  @media (max-width: $media-screen-width) {
    padding-top: 15vh;
  }
  padding-bottom: 1vh;
  margin-bottom: 4vh;
  background-image: url("../../assets/wallhaven-57300.jpg");
  background-position: center;
  background-size: cover;
  height: 30px;
}
.headimg {
  width: 150px;
  height: 150px;
  position: relative;
  top: -2vh;
  border-radius: 15px;
}
.list {
  margin-top: 100px;
}
</style>
<style lang="scss" scoped>
@import "@/assets/screen.scss";
@import "@/assets/source.scss";
.note {
  margin: 10px 0;
  padding: 30px 20px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: $box-shadow-type1;
  transition: 0.2s;
  border-radius: 10px;
  @media (min-width: $media-screen-width) {
    padding: 30px 40px;
  }
}

.note:hover {
  transform: translateY(-2px);
  box-shadow: $box-shadow-type2;
}
.tittle {
  font-size: 33px;
  @media (min-width: $media-screen-width) {
    float: left;
  }
  .tags {
    margin: 0 5px;
  }
}
.author {
  @media (min-width: $media-screen-width) {
    float: right;
  }
  line-height: 33px;
}
</style>

